<template>
	<view class="page-content">
		<view class="u-p-20">
			<view class="box-radius u-p-t-36 u-p-b-36 data-box ">
				<u-row gutter="20">
					<u-col span="6">
						<view class="u-text-center">
							<view class="u-font-32 color-primary">
								{{detail.myPerformance||0}}
							</view>
							<view class="u-tips-color u-font-24 u-p-t-12">
								我的业绩(元)
							</view>
						</view>
					</u-col>
					<!-- <u-col span="4">
						<view class="u-text-center">
							<view class="u-font-32 color-primary">
								{{detail.performance||0}}
							</view>
							<view class="u-tips-color u-font-24 u-p-t-12">
								团队业绩(元)
							</view>
						</view>
					</u-col> -->
					<u-col span="6">
						<view class="u-text-center">
							<view class="u-font-32 color-primary">
								{{detail.dividendCount||0}}
							</view>
							<view class="u-tips-color u-font-24 u-p-t-12">
								分红次数
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<u-tabs font-size="28" :gutter="30" :list="tabsList" inactive-color="#FFFFFF" active-color="#E88D1A"
			:is-scroll="false" v-model="tabsCurrent" @change="tabsChange" bg-color="rgba(0,0,0,0)"></u-tabs>
		<view class="u-p-28">
			<template v-if="tabsCurrent == 0 && waitingTeam">
				<team :showTree="true" :detail="waitingTeam"></team>
				<u-gap height="20"></u-gap>
			</template>
			<template v-if="tabsCurrent == 1 && doneTeam">
				<team :showTree="true" :detail="doneTeam"></team>
				<u-gap height="20"></u-gap>
			</template>
		</view>
	</view>
</template>


<script setup>
	import mixinList from '@/common/js/mixinList.js';
	import team from '@/pagesSub/components/team.vue';
	import orderRentItem from '@/pagesSub/components/order-rent-item.vue';
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		modal,
		navRedirectLogin
	} = proxy.$util;

	const tabsCurrent = ref(0)
	const tabsList = [{
			name: '进行中',
			id: 0
		},
		{
			name: '已完成',
			id: 1
		},
	];
	const type = computed(() => {
		return tabsList[tabsCurrent.value].id
	});
	const detail = reactive({})
	const waitingTeam = ref(null) // 进行中的队伍
	const doneTeam = ref(null) // 已完成的队伍
	const getData = () => {
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getItem(type.value).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			if(data && data.memberList){
				if (type.value == 0) {
					waitingTeam.value = data
				}
				if (type.value == 1) {
					doneTeam.value = data
				}
			}else{
				let title = type.value == 0 ? '暂无进行中的队伍':'暂无已完成的队伍'
				modal({
					title:title,
					content: '推荐好友下单报单区商品即可生成队伍。',
					confirmText:'去邀请'
				}).then(res=>{
					navRedirectLogin('/pages/share/share')
				})
			}
			for (let key in data) {
				detail[key] = data[key]
			}
			skeletonLoading.value = false
		}).catch(res => {
			// skeletonLoading.value = false
		})
	}
	watch(tabsCurrent, async (val) => {
		await getData()
	})
	const tabsChange = (index) => {}
	onReady(() => {

	})
	onLoad((d) => {
		getData(1)
	})
	onShow(() => {

	})
</script>
<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		background: linear-gradient(207deg, #117B12 49%, #17A919 100%);
	}

	.data-box {
		background: linear-gradient(180deg, #D1F9D1 0%, #FFFFFF 40%);
	}
</style>